
<script setup>
import { onMounted } from 'vue'
let canvasCtx = '';

onMounted(() => {
    initCanvas();
});

function initCanvas() {
    let canvas = document.createElement('canvas');
    canvasCtx = canvas.getContext('2d');

    canvasCtx.clearRect(0, 0, canvas.width, canvas.height);

    for (let i = 0; i < 20; i++) {
        canvasCtx.fillStyle = 'rgba(153,153,153,0.25)';
        canvasCtx.translate(i, (20));
        canvasCtx.rotate(-25 * Math.PI / 180);
        canvasCtx.fillText("watermark", i * 80, i * 25); // 把水印偏转角度调整为原来的，不然他会一直转
        canvasCtx.rotate(25 * Math.PI / 180);
    }

    let imgUrl = canvas.toDataURL('image/png');

    let watermarkDiv = document.createElement('div');
    watermarkDiv.className = 'watermark';
    watermarkDiv.setAttribute('style', `background:url(${imgUrl}) repeat`)
    document.body.appendChild(watermarkDiv);
}
</script>
  
<style scope lang="scss">
.watermark {
    width: 100%;
    height: 100%;
    position: fixed;
    pointer-events: none;
    z-index: 9999;
}
</style>